<template>
  <div>
    <!--1.首先，弹窗页面中要有el-dialog组件即弹窗组件，我们把弹窗中的内容放在el-dialog组件中-->
    <!--2.设置:visible.sync属性，动态绑定一个布尔值，通过这个属性来控制弹窗是否弹出-->
    <el-dialog title="编辑内容" :visible.sync="detailVisible" width="35%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="销售数量" style="width: 40%;">
          <el-input v-model="form.staffID"></el-input>
        </el-form-item>
        <el-form-item label="单价" style="width: 40%;">
          <el-input v-model="form.stockMoney"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sure()">确认</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: "dialogComponent",
  data() {
    return {
      detailVisible: false,
      data: '',
      form: {
        staffID: '',
        stockMoney: '',
      }
    }
  },
  methods: {
    sure() {
      const data = {
        goodsId: this.data,
        saleNum: this.form.staffID,
        originPrice: this.form.stockMoney,
        discountPrice: this.form.staffID * this.form.stockMoney
      };
      console.log(data)
      axios.put(`api/sales/up/${this.data}`, data)
        .then(response => {
          this.$router.go(0)
          this.detailVisible = false
          // console.log(response.data)
        }).catch(error => {
          console.error(error)
        })
    },
    //3.定义一个init函数，通过设置detailVisible值为true来让弹窗弹出，这个函数会在父组件的方法中被调用
    init(data) {
      this.detailVisible = true;
      //打印父类传来的数据
      this.data = data;
      console.log(data);
    },
    onSubmit() {
      console.log('sucess');
    }
  }
}
</script>